// import {init} from "snabbdom/build/package/init"
// import {h} from "snabbdom/build/package/h"
// // 模块的作用
// // 1、snabbdom的核心库并不能处理DOM元素的属性、样式、事件等，可以通过注册snabbdom默认提供的模块来实现
// // 2、snabbdom中的模块可以用来拓展snabbdom的功能
// // 3、模块的实现是通过注册全局的钩子函数实现的

// // 模块使用的步骤
// // 1、导入需要的模块
// import {styleModule} from "snabbdom/build/package/modules/style"
// import {eventListenersModule} from "snabbdom/build/package/modules/eventlisteners"
// // 2、init([])中注入模块
// const patch=init([
//     styleModule,
//     eventListenersModule
// ]) 
// // 3、h()函数的第二个参数处使用模块  第二个参数传入的是模块中使用的数据(对象的形式)
// let vnode=h('div',[
//     h('h1',{ style : { backgroundColor:'red' } },'helloWorld'),
//     h('p',{ on :{ click : eventHandler } },'hello p')
// ])
// function eventHandler(){
//     console.log('111')
// }

// let app=document.querySelector("#app")

// let oldVnode=patch(app,vnode)
import { init } from "snabbdom/build/package/init";
import { classModule } from "snabbdom/build/package/modules/class";
import { propsModule } from "snabbdom/build/package/modules/props";
import { styleModule } from "snabbdom/build/package/modules/style";
import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners";
import { h } from "snabbdom/build/package/h";

var patch = init([
    classModule,
    propsModule, 
    styleModule, 
    eventListenersModule
]);
var container = document.getElementById("app");

// 定义数据
var data = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

// list-item
var item = function (itemIdx, itemData) {
  return h("li", {}, [
    itemData,
    h(
      "span",
      {
        style: {
          color: "red",
          float: "right",
        },
        on: { click: ()=>{delEventHandler(itemIdx)} },
      },
      ["del"]
    ),
  ]);
};

// list
var list = function () {
  let items = [];
  for (let i = 0; i < data.length; i++) {
    items.push(item(i, data[i]));
  }
  return h("ul", {}, items);
};

// btns
var btns = function () {
  return h("div", { style: { float: "right" } }, [
    h(
      "button",
      {
        on: {
          click: addEventHandler,
        },
      },
      "add"
    ),
    h(
      "button",
      {
        style: {
          marginLeft: "10px",
        },
        on: {
          click: reverseEventHandler,
        },
      },
      "reverse"
    ),
  ]);
};

// clearBoth
var clear = h("div", { style: { clear: "both" } });

// 主节点
var pageNode = function () {
  return h(
    "div#main",
    {
      style: {
        width: "800px",
        paddingTop: "30px",
        margin: "0 auto",
      },
    },
    [btns(), clear, list()]
  );
};

// 首次渲染保存当前节点为老节点
var oldPageNode = patch(container, pageNode());

// 刷新节点，并重新保存老节点
function updateNode() {
  oldPageNode = patch(oldPageNode, pageNode());
}

// 删除元素
function delEventHandler(idx) {
  data.splice(idx, 1);

  updateNode();
}

// 添加元素
function addEventHandler() {
  data.push("这是新增加的元素，随机数：" + Math.floor(Math.random() * 900 + 100));

  updateNode();
}

// 反转元素
function reverseEventHandler() {
  data.reverse();

  updateNode();
}